<template xmlns="">
  <div>
    <el-container style="height: 100vh">
      <el-aside :width="sideWidth +'px'" style="background-color: rgb(238, 241, 246);height: 100%">
        <el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x:hidden"
                 :collapse="isCollapsed"
                 background-color="rgb(48,65,86)"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                 :collapse-transition="false"
                 router
                 :default-active="this.$route.path"
        >
          <div style="height: 40px; line-height: 40px; text-align: center">
            <img src="../assets/logo.png" alt="" style="width: 20px; position: relative; top: 5px; margin-right: 4px">
            <b style="color: white" v-show="!isCollapsed">智能排班系统</b></div>
          <el-menu-item index="/StaffInfo">
            <i class="el-icon-message"></i>
            <span slot="title">员工信息</span>

          </el-menu-item>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-document"></i>
              <span slot="title">统计报表</span>
            </template>
            <el-menu-item index="StatisticsTable"
                          :default-active="$route.path">统计报表导出</el-menu-item>

          </el-submenu>
          <el-menu-item index="/ConfigCenter">
            <i class="el-icon-setting"></i>
            <span slot="title">设置中心</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="font-size: 12px; border-bottom: 1px; solid-color: #ccc; line-height: 60px; display: flex">
          <div style="flex:1; font-size: 20px">
      <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse">
      </span>
          </div>
          <el-dropdown style="width: 100px; cursor: pointer">
            <span>{{ user.username }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </el-header>

        <el-main>
          <div>    <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>设置中心</el-breadcrumb-item>

          </el-breadcrumb>
          </div>
          <div style="margin: 20px;"></div>
          <el-form :label-position="labelPosition" label-width="80px" :model="form">
            <div>当前用户：
              <span>{{ user.username }}</span>
            </div>
           <el-form-item label="用户名">
             <el-input style="width: 700px" v-model=form.username placeholder="请输入修改的用户名"></el-input>
           </el-form-item>
            <el-form-item label="手机号">
              <el-input style="width: 700px" v-model=form.phone placeholder="请输入修改的手机号"></el-input>
            </el-form-item>
            <el-button @click="save">提交</el-button>
          </el-form>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<script>
import request from "@/utils/request.js";
import FileSaver from "file-saver";
import XLSX from "xlsx";
import moment from "moment";

export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      total: 0,
      pageNum: 1,
      pageSize: 5,
      labelPosition: 'right',
      form: {
        username:"",
        phone:"",
      },
      collapseBtnClass:'el-icon-s-fold',
      isCollapsed:false,
    }
  },
  created() {
    this.load()
  },

  methods:{
    collapse(){
      this.isCollapsed=!this.isCollapsed
      if(this.isCollapsed) {
        this.isCollapsed = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
      }else{
        this.collapseBtnClass='el-icon-s-fold'
      }
    },
    load() {//请求分页查询数据
      request.get("/page",{
        params:{
          username:this.user.username,
          phone:this.phone
        }
      }).then(res=>{
        console.log(res)
        this.form=res.records;
      })
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.load()
    },
    handleCurrentChange(pageNum){
      this.pageNum=pageNum;
      this.load()
    },
    reload(){
      this.username="";
      this.phone="";
      this.load()
    },
    save(){
      request.post("/user",this.form).then(res=>{
        if(res)
        {
          this.$message.success("保存成功");
          this.dialogFormVisible=false;
          this.load();

        }else{
          this.$message.error("保存失败");
          this.dialogFormVisible=false;
        }
      })
    },

  }
}

</script>